@import '../../styles/variables';
@import '../../styles/mixins';

.header {
  @include fullWidth();
  @include contentPadding(0, 160px);
  @include headerAngles($ms-color-neutralLighter);
  color: $ms-color-white;

  a,
  a:visited {
    color: $ms-color-white;
    transition: color $ms-animation-duration-2 $ms-animation-ease-1;
  }

  img {
    display: none;
  }
}

.headerStyles {
  background-color: $color-styles-darker;

  a,
  a:visited {
    border-bottom: 1px solid $color-styles-light;
  }

  a:hover,
  a:active {
    color: $color-styles-lighter;
  }
}

.headerComponents {
  background-color: $color-components-darker;

  a,
  a:visited {
    border-bottom: 1px solid $color-components-light;
  }

  a:hover,
  a:active {
    color: $color-components-lighter;
  }
}

.header p,
.features {
  max-width: 40em;
}

.features {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}

.title {
  display: block;
  font-size: $font-size-big;
  font-weight: $ms-font-weight-semilight;
  margin-bottom: $contentMargin-vertical;
  margin-top: $titleMargin-vertical;
}

.description {
  display: block;
  font-size: $ms-font-size-m;
  line-height: 1.5;
  margin-bottom: 12px;
}

.descriptionLarge {
  display: block;
  font-size: $ms-font-size-m;
  width: 70%;
  margin-bottom: $contentMargin-vertical;
}

.secondary {
  padding-top: 80px;
  width: 50%;
}

@media screen and (min-width: $uhf-screen-min-mobile) {
  .features {
    flex-direction: row;

    li {
      padding-right: 24px;
      width: 50%; // Two in the first row
    }
  }
}

@media screen and (min-width: $ms-screen-min-xl) {
  .header p,
  .features {
    max-width: 53%;
  }

  .header {
    min-height: 480px; // Give the illustration some room
  }

  .header img {
    display: block;
    position: absolute;
    top: -40px;
    height: 340px;
    @include ms-right(120px);
    z-index: 500;
  }
}
